<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>实时接收内容</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <script src="{{ url_for('static', filename='js/socket.io.min.js') }}"></script>
    <style>
        body {
            background-color: #f4f6f9;
        }
        #output {
            min-height: 300px;
            white-space: pre-wrap;
            font-family: monospace;
        }
    </style>
</head>
<body>
<div class="container my-5">
    <div class="card shadow">
        <div class="card-header bg-primary text-white">
            <h4 class="mb-0">📥 实时接收手机发送内容</h4>
        </div>
        <div class="card-body">
            <p class="text-muted">保持此页面打开以接收来自手机的文本或文件信息。</p>
            <div id="output" class="border rounded p-3 bg-light">
                <span class="text-muted">等待接收内容中...</span>
            </div>
            <a id="downloadLink" class="btn btn-success mt-3 d-none" download>点击下载文件</a>
        </div>
    </div>
</div>

{% if qr_data_uri %}
<div class="text-center my-3">
    <p class="text-muted">📱 请用手机访问以下二维码地址（注意，电脑和手机必须在一个网络下）：</p>
    <img src="{{ qr_data_uri }}" alt="监听二维码" style="max-width: 80%; height: auto;">
    <p class="small text-muted">扫码后手机发送实时接收文本或文件</p>
</div>
{% endif %}


<script>
    const socket = io();
    const out = document.getElementById('output');
    const downloadLink = document.getElementById('downloadLink');

    socket.on('new_content', function(data) {
        if (data.text) {
            out.innerHTML = '<strong>📄 文本内容：</strong><br>' + data.text;
            downloadLink.classList.add('d-none');
        } else if (data.filename && data.file_url) {
            // 显示文件信息
            out.innerHTML = '<strong>📁 收到文件：</strong><br>' + data.filename;

            // 创建隐藏的iframe或直接跳转实现自动下载
            const downloadFrame = document.createElement('iframe');
            downloadFrame.src = data.file_url;
            downloadFrame.style.display = 'none';
            document.body.appendChild(downloadFrame);

            // 同时保留手动下载链接
            downloadLink.href = data.file_url;
            downloadLink.download = data.filename;
            downloadLink.textContent = '📁 下载文件：' + data.filename;
            downloadLink.classList.remove('d-none');
        }
    });
</script>
</body>
</html>
